<template>
    <MyTable :list="list">
      <template #head>
        <th>编号</th>
        <th>图片</th>
        <th>名称</th>
        <th>标签</th>
      </template>
      <!-- 插槽作用域 -->
      <template #body="{ item, index}">
        <td style="width: 100px;">{{ index+1 }}</td>
        <td style="width: 200px;">
          <img :src="item.photo">          
        </td>
        <td style="width: 300px;">{{ item.name }}</td>
        <td>
            <MyTage v-model="item.tage"></MyTage>
        </td> 
      </template>
    </MyTable>
</template>
<!-- 需求：
    1.mytage组件：
      双击显示输入框，并自动聚焦；失去焦点后显示标签;回显；内容修改后显示
      v-if/else;自定义属性v-foucs  
      v-model = :value @input 组件内部接收，:value设置回显
      @keyup.enter 触发事件；@emit(input,e.target.value)修改父组件-->
<!-- 2.mytable组件：
      数据不能写死：父传子
      结构不能写死：插槽【具名插槽】 -->
<script>
import MyTage from './components/MyTage.vue'
import MyTable from './components/MyTable.vue';

export default {
  data(){
    return{
      list:[
        {id:101, photo:'https://img.zcool.cn/community/01811f5abc92fda801218207a45ce8.JPG@1280w_1l_2o_100sh.jpg', 
         name:'张裕葡萄酒富贵之选！', tage: '红酒'},
        {id:102, photo:'https://img.zcool.cn/community/01811f5abc92fda801218207a45ce8.JPG@1280w_1l_2o_100sh.jpg',
         name:'宫廷玉液酒，180一杯！', tage: '红酒'},
        {id:103, photo:'https://img.zcool.cn/community/01811f5abc92fda801218207a45ce8.JPG@1280w_1l_2o_100sh.jpg',
         name:'盛世经典，滴滴咏流传！', tage: '红酒'}
      ]
    }
  },
  components:{
    MyTage,
    MyTable
  }
}
</script>

<style>

</style>
